<template>
  <div class="container-box" v-if="getUser">
    <!-- <div class="row "> -->
    <!-- <div class="col "> -->
    <div class="my-home-div user position-relative" :style="{ display: 'flex', flexWrap: 'wrap' }">
      <img src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/GIF/bee.gif" alt="">
      <div class="col" :style="{ display: 'flex', flexWrap: 'wrap' }">
        <div class="username">
          <el-avatar :size="62" :src="getUser.headportrait" />
        </div>
        <div class="username">
          <div>{{ getUser.name }}</div>
        </div>
      </div>
      <div class="col text-right">
        <el-button v-if="getUser?.isAdmin" @click="$router.push({ path: '/mydata/question' })" size="default">
          我的题目
        </el-button>
        <!-- <el-button v-if="!userId" size="default" @click="handleCommand('d')">个人设置</el-button> -->
      </div>
      <!-- </div> -->
      <!-- </div> -->
    </div>

    <div class="row">
      <div class="col-md-8 col-sm-12">
        <!-- 我的数据 -->
        <questionnumVue :teamid="teamid" :teamdata="teamdata" :getuser="getUser"></questionnumVue>
      </div>
      <div class="col-md-4 col-sm-12 ">
        <div class="my-home-div">
          <div class="my-home-div-line row">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon_personalinformation" />
              </svg>
              个人信息
            </div>
          </div>
          <div class="m-p-3  m-0">
            <div class="user_date">
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_Clock" />
                </svg>
                最近登录时间：{{ TimeYH(getUser.lasttime) }}
              </div>
            </div>
            <div class="user_date">
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-a-icon_CalendarClock" />
                </svg>
                最近答题时间：{{ teamdata.createdAt ? TimeYH(teamdata.createdAt) : '无' }}
              </div>
            </div>
          </div>
        </div>
        <!-- 我完成的题目 -->
        <div class="my-home-div margin-bottom0">
          <div class="my-home-div-line row">
            <div>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon_personalinformation" />
              </svg>
              已完成题目
            </div>
          </div>
          <el-scrollbar>
            <div class="m-p-3 m-0 my-question-box">
              <el-row>
                <el-col v-for="(item, k) in myFinishQ" :span="8" class="cursor-pointer" :title="item.question?.name"
                  @click="goToQuestion(item)" :key="k">
                  <el-text class="finish-question-item cursor-pointer hover-color" truncated tag="span" size="default">
                    {{ item?.question?.name }}
                  </el-text>
                </el-col>
              </el-row>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { computed, ComputedRef, inject, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncgetuser, asyncranking, asyncselectdistinctuserquestion } from "../../api";
import { Storekey } from "../../interface";
import Study from "../../mysql_interface/studycodemodel";
import questionnumVue from "../../ojSass/views/User/questionnum.vue";
import { TimeYH } from "../../util/time";

const headnav = inject<ComputedRef<{ handleCommand: (v: string) => void }>>("headnav");

function handleCommand(v: string) {
  headnav?.value.handleCommand('d')
}

const router = useRouter();
const route = useRoute();
const store = useStore(Storekey);
// userid
const userId = computed(() => {
  return Number(route.query.userid)
})
const user = ref<Study.Iuser>()
const getUser = computed(() => {
  if (userId.value) {
    return user.value
  }
  return store.state.user;
});
const teamid = computed(() => {
  // if (userId.value) {
  //    return getUser.value?.teamid
  // }
  return store.state.user?.teamid;
})

const teamdata = ref<{ ID?: number, name?: string, ACcount?: number, df?: number, headportrait?: string, createdAt?: Date }>({})
async function teamstart() {
  if (teamid.value) {
    try {
      const t = await asyncranking({
        userid: getUser.value?.ID,
        teamid: teamid.value,
        formdate: Date.now() - (1000 * 60 * 60 * 24 * 365), todate: new Date()
      })
      teamdata.value = t.ACrank[0] || {}
    } catch (e) {
      console.error("teamstart catch e=>", e)
      // ElMessage.error('没有查询')
    }
  }
}

// 
const myFinishQ = ref<{ questionid: number; userid: number; question: Study.Iquestion }[]>([])
async function getMyFinishQuestion() {
  const { rows, count } = await asyncselectdistinctuserquestion({
    _order: "questionid",
    _sortable: "DESC",
    userid: getUser.value?.ID,
  })
  myFinishQ.value = rows
}
function goToQuestion(row: { questionid: number, userid: number, question: Study.Iquestion }) {
  router.push({
    name: '题目',
    params: { ID: row.question.ID },
    query: { userId: getUser.value?.ID }
  })
}

async function start() {
  if (userId.value) {
    user.value = await asyncgetuser({ ID: userId.value })
  }
  teamstart()
  getMyFinishQuestion()
}

onMounted(() => {
  start();
});

watch(() => userId.value, () => {
  start();
});
</script>

<style scoped>
.container-box {
  padding: var(--container-margin) 5% 0;
  margin: var(--container-margin) 0rem 0 0rem;
  /* 外边距 */
  --container-margin: 20px;
  --container-header-height: 16vh;
  --container-bg-color: #fff
}

.finish-question-item {
  width: 90%;
  padding: 4px 8px;
  margin: 4px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}

.finish-question-item:hover {
  background-color: var(--color-f5);
  color: var(--color-cheng);
}

.user_date {
  display: flex;
  flex-wrap: wrap;

}

.user_date div {
  min-width: 100px;
  height: 40px;
  line-height: 40px;
  width: 100%;
}

.user {
  height: 112px;
  /* margin-top: 32px; */
  margin-bottom: var(--container-margin);
  padding: var(--container-margin);
  z-index: 2;
  background-image: url(https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/oj_1_1/GIF/CATBC.gif);
  background-size: contain;
  background-repeat: no-repeat;
}

.user img {
  position: absolute;
  top: 15px;
  left: 20%;
}

.username {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  margin-right: 12px;
}

/* 我的题目 */
.my-question-box {
  /* max-height: calc(100vh - 64px - 2 * var(--container-margin) - 112px - 24px - 152px - 24px - 48px); */
  max-height: 101vh;
}
</style>
